<template>
  <div>
    <draggable
      :ref="draggableRef"
      v-model.lazy="dragList"
      chosenClass="chosen"
      forceFallback="true"
      :group="group"
      :animation="animation"
      :filter="`.` + filter"
      @start="onStart"
      @end="onEnd"
      @move="onMove"
      @change="onChange"
    >
      <transition-group>
        <div
          class="item"
          :class="item.filterClass"
          v-for="item in dragList"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "vueDraggable",
  props: {
    //自定义ref
    draggableRef: {
      type: String,
      default() {
        return "vueDraggable";
      },
    },
    //标签数据
    dragData: {
      type: Array,
      default() {
        return [];
      },
    },
    group: {
      type: [String],
      default() {
        return "";
      },
    },
    animation: {
      type: [Number],
      default() {
        return 1000;
      },
    },
    filter: {
      //禁止拖动元素的样式名称
      type: [String],
      default() {
        return "";
      },
    },
    which: {
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      dragList: this.dragData && this.dragData.length > 0 ? this.dragData : [],
    };
  },
  components: {
    draggable,
  },
  created() {},
  methods: {
    //evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
    onChange(evt) {
      console.log(evt, "change...");
    },
    //start ,end ,add,update, sort, remove 得到的都差不多
    onStart(evt) {
      console.log(evt, "start...");
    },
    onEnd(evt) {
      console.log(evt, "end....");
      evt.item; //可以知道拖动的本身
      evt.to; // 可以知道拖动的目标列表
      evt.from; // 可以知道之前的列表
      evt.oldIndex; // 可以知道拖动前的位置
      evt.newIndex; // 可以知道拖动后的位置
    },
    onMove(evt, originalEvent) {
      console.log(evt, "move");
      console.log(originalEvent); //鼠标位置
    },
  },
};
</script>

<style scoped>
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

.item:hover {
  background-color: #f1f1f1;
  cursor: move;
}

.chosen {
  border: solid 2px #3089dc !important;
}
</style>
